<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div 
      id="myDiv"
      style="width: 300px; height: 150px; border: 1px solid #999"
    >
      Right click or Ctrl+click me to get a custom context menu. Click anywhere
      else to get the default context menu.
    </div>
    <ul
      id="myMenu"
      style="position: absolute; visibility: hidden; background-color: silver"
    >
      <li><a href="http://www.somewhere.com"> somewhere</a></li>
      <li><a href="http://www.wrox.com">Wrox site</a></li>
      <li><a href="http://www.somewhere-else.com">somewhere-else</a></li>
    </ul>

    <script>
      window.addEventListener('load', event => {
        console.log('loaded')
        let div = document.getElementById('myDiv')
        div.addEventListener('contextmenu', event => {
          event.preventDefault()
          let menu = document.getElementById('myMenu')
          menu.style.left = event.clientX + 'px'
          menu.style.top = event.clientY + 'px'
          menu.style.visibility = 'visible'
        })
        document.addEventListener('mousedown', event => {
          document.getElementById('myMenu').style.visibility = 'hidden'
        })
      })
      
      window.addEventListener('beforeunload', e => {
        const msg = '确认关闭?'
        e.returnValue = msg
        return msg
      })

      window.addEventListener('hashchange', e => {
        console.log('hashchange', e)
      })

      setTimeout(() => {
        location.hash = +new Date()
      }, 2000)
    </script>
  </body>
</html>
